<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >车辆详情</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <!-- 人员信息 -->
        <van-cell-group>
          <van-cell title="查看车辆信息" class="bg_grey" />
          <van-cell title="VIN号" :value="vehicle.vinNo"></van-cell>
          <van-cell
            title="车型"
            :value="
              vehicle.vehicleSeries.seriesFactory +
              '-' +
              vehicle.vehicleSeries.seriesName +
              '-' +
              vehicle.vehicleSeries.seriesCode +
              '(' +
              vehicle.vehicleColor +
              '}'
            "
          ></van-cell>
          <van-cell title="使用方式" :value="vehicleType"></van-cell>
          <van-cell title="车牌号" :value="vehicle.plateNum"></van-cell>
          <van-cell
            title="机构"
            :value="vehicle.company.companyName"
          ></van-cell>
          <van-cell title="绑定设备" :value="isBindSN"></van-cell>
          <van-cell title="车辆照片"></van-cell>
          <van-cell>
            <van-image
              width="100"
              height="100"
              :src="url1"
            />
          </van-cell>
          <van-cell title="行驶证照片"></van-cell>

          <van-cell>
            <van-image
              width="100"
              height="100"
              :src="url2"
          /></van-cell>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            block
            type="primary"
            style="background-color: #999999; border-color: #999999"
            @click="back"
            >关闭</van-button
          >
        </div>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24">
        <van-cell
          style="height: 40px; background-color: white"
          class="bg_grey"
        ></van-cell>
      </van-col>
    </van-row>
  </div>
</template>

<script>
/**
 * 用车记录详情页
 */
import { base_uri } from '../../../../api/api_config';

export default {
  data() {
    return {
      vehicle: {},
      vehicleType: "",
      url1: '',
      url2: '',
      baseUrl: '',
      isBindSN: ''
    };
  },
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    initData() {
      this.vehicle = this.$store.state.vehicle;
      this.baseUrl = base_uri
      switch (this.vehicle.vehicleType) {
        case 1:
          this.vehicleType = "试驾";
          break;
        case 2:
          this.vehicleType = "客用";
          break;
        case 3:
          this.vehicleType = "救援";
          break;
        default:
          this.vehicleType = this.vehicle.vehicleType + "";
          break;
      }

      if (this.vehicle.vehicleAttachmentList.length > 0) {
        this.url1 = this.baseUrl + this.vehicle.vehicleAttachmentList[0].file_path
      }
      if (this.vehicle.licenseAttachmentList.length > 0) {
        this.url2 = this.baseUrl + this.vehicle.licenseAttachmentList[0].file_path
      }
      switch (this.vehicle.deviceStatus) {
        case 1:
          this.isBindSN = '未安装'
          break;
        case 2:
          this.isBindSN = '已安装'
          break;
        case 3:
          this.isBindSN = '维护中'
          break;
        default:
          this.isBindSN = '无'
          break;
      }
    },
    back() {
      this.$router.push("/carUsage/carManage");
    },
  },
};
</script>

<style scoped>
.van-cell .van-cell__title {
  min-width: 30%;
}
.van-cell .van-cell__value {
  min-width: 70%;
}
</style>
